<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.lp.cfg.ProConfig"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/oss/iot/common/variable.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp"%>
<%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp"%>
<style type="text/css">
	.index_theLeft ul {
	    width: 100%;
	    padding: 0px;
	    margin: 0px;
	    overflow: auto;
	}
	
	.mapContainer{
		height: 550px;width:100%;padding-left:170px;
	}
	
	.app-container{
		background:  #f2f2f2;width: 100%;border-top:1px solid #ecf0f5;
	}
	
	.box-white {
	    width: 97%;
	    min-width: 897px;
	    padding-bottom: 0;
	    margin: 0 auto;
	}
	.box {
	    padding: 10px;
	    padding-top:1px;
	    border-left: 1px solid #d2d6de;
	    border-right: 1px solid #d2d6de;
	    border-bottom: 1px solid #d2d6de;
	}
	.box {
	    border: 0!important;
	    box-shadow: 0 0 2px 1px rgba(13,5,9,.08)!important;
	}
	.box {
	    position: relative;
	    border-radius: 3px;
	    background: #fff;
	    border-top: 3px solid #d2d6de;
	    margin-bottom: 20px;
	    width: 100%;
	    box-shadow: 0 1px 1px rgba(0,0,0,.1);
	}

.sceneList-info{
	padding-top: 10px;
	padding-left: 10px;
}
	
</style>
</head>
<body>
	<div>
		<div>
			<!-- 左边栏 -->
			<div class="float-left index_theLeft" style="width:170px;">
				<div class="prolist">
					<span>Item list</span>
				</div>
				<ul class="dashboard-menu">
					<c:forEach items="${info.data.getData()}" varStatus="status" var="obj">
						<li onclick="changeScene(this)"  
							<c:if test="${id !=null }">
								<c:if test="${obj.id ==id}">
							 	  class="active"
							   </c:if> 
							</c:if>
							<c:if test="${id ==null }">
								<c:if test="${status.index ==0}">
							 	 class="active"
							   </c:if> 
							</c:if>
						  sid="${obj.id}">
	                       <span class="icon-stack-overflow"></span>&nbsp;${obj.name }
	                    </li>
					</c:forEach>
				</ul>
			</div>
			<div class="mapContainer" >
				<div class="app-container">
					<div class="container-layout sceneList-info">
						<div class="box join-device-box">
							
							<div class="search-container jui-search_table" data-options="submit:'#searchbtns',table:'#init-table'">
									
									<span>Device Name:</span> 
									<select type-name="node_id"  style="width: 220px;" class="input jui-selecter input-self input-select node_id mr-10"  
												config-option=" url:'/page/node.json?pageSize=300&paged=1',data:{scene_id:'$.scene_id$' },
												init_value:'Please select device','key':'id','value':'name',type:'page' " ></select>
									
									<input type-name="name" style="width: 220px;" placeholder="Trigger name query" class="input input-self" />
							
									<input type-name="sensor_name" style="width: 220px;" placeholder="Sensor name query"  class="input input-self" />
									<input type-name="scene_id" class="scene_id" type="hidden" />
									<button onclick="addTrigger()"  class="button ml-20 bg-iot float-right"><span class="icon-plus"></span> Add trigger</button>
									<button id="searchbtns" class="button ml-20 bg-iot float-right"><span class="icon-search"></span> inquire</button>
							</div>
							
							 <div style="margin-top:10px;">
								<div id="init-table" type-option="table"  config-option="'url':'/page/trigger',
											param:{ scene_id:'$.scene_id$' },
											'columns':[
												{'name':'Serial number','type':'seq','value':'seq','width':'8%'}, 
												{'name':'Name','value':'name','width':'8%'}, 
												{'name':'Correlation sensor','value':'from_sensor_name','width':'8%'}, 
												{'name':'Trigger condition type','type':'category','value':'iot_trigger_condition_type','width':'10%'}, 
												{'name':'Argument','value':'condition_params','width':'6%'}, 
												{'name':'Execution type','type':'category','value':'iot_trigger_action_type','width':'20%'},
												{'name':'Cycle interval','value':'trigger_inteval_time','width':'7%'}, 
												{name:'Status',value:'iot_trigger_status',type:'category',value_callback:'statusFunc','width':'3%',style:{43:'color,#18bbfc',44:'color,red'}}, 
												{'name':'Controls','type':'self','value_callback':'value_function','width':'4%'}]" > 
								
								</div>
							</div> 
						
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
function addTrigger(){
	forwardUrl("/iot/trigger_info_detail?id="+ $(".scene_id").val() );
}
function value_function(data,seq){
	return "<span tag='Editor' onclick='t_edit(this,"+data.id+")' class='self-icon icon-edit'></span>"+
    "<span tag='Delete' onclick='t_delete(this,"+data.id+")' class='self-icon icon-bitbucket'></span>";
}
function t_edit(obj,id){
	forwardUrl("/iot/trigger_info_detail?id="+ $(".scene_id").val()  +"&tid="+id);
}
function changeScene(obj){
	$(".dashboard-menu li").removeClass("active");
	$(obj).addClass("active");
	$(".scene_id").val($(".dashboard-menu li.active").attr("sid"));
	reflash( $(".dashboard-menu li.active").attr("sid"));
	//
	manual_init_selecter($(".jui-selecter"));
}
function reflash(id){
	$("#init-table").data("params",{ scene_id: $(".scene_id").val() });
	$("#init-table").tableAdaptor();
}
function t_delete(obj,id){
	lcomfirm('Are you sure to delete the trigger?',function(){
		commonAjax("DELETE",localUrl+"/trigger?id="+id, "",function(){
			tip("Successfully deleted");
			setTimeout(function(){
				closeAll();
				$("#init-table").tableAdaptor();
			},1000)
		});
	});
}
$(function(){
	$(".scene_id").val($(".dashboard-menu li.active").attr("sid"));
})
</script>
</html>